import React, { Component } from 'react'
import ReactDOM from "react-dom"
// export default class B extends Component {
//   state = {timer: "",count: 0}
//   componentDidMount() {
//     this.timer = setInterval(() => {
//       this.setState(state => ({count: state.count+1}))
//     },500)
//   }
//   remove = () => {
//     ReactDOM.unmountComponentAtNode(document.getElementById("app"))
//   }
//   componentWillUnmount() {
//     clearInterval(this.timer)
//   }
//   render() {
//     return (
//       <>
//         <h2>count 的值为 {this.state.count}</h2>
//         <button onClick={this.remove}>移除整个组件</button>
//       </>
//     )
//   }
// }

function B() {
  const [count,handleCount] = React.useState(0)
  const [age,handleAge] = React.useState(88)
  React.useEffect(() => {
      console.log("回调函数执行了");
      let timer = setInterval(() => {
        handleCount(value => value+1)
      },500)
      return () => {  // 在组件卸载之前执行
        // 执行收尾工作
        clearInterval(timer)
      }
  },[age]) // 如果指定为 [],回调函数只会在第一次render()后执行; 假如传入需要监听的state值[count]，就表示当传入的count变化只会，才会执行,定时器一直在修改 count的值，所以会一直执行;假如传入[age],就表示当传入的age变化才会执行，所以也只会在第一次render的时候执行

  function remove() {
    ReactDOM.unmountComponentAtNode(document.getElementById("app"))
  }

  return (
    <>
        <h2>count 的值为 {count}</h2>
        <button onClick={remove}>移除整个组件</button>
      </>
  )
}

export default B